<template>
  <div class="cont">
    <n-space vertical class="layout">
      <n-layout has-sider>
        <n-layout-sider style="height: 100vh;z-index:9;" inverted>
          <SideBar></SideBar>
        </n-layout-sider>
        <n-layout style="height: 100vh">
          <n-layout-header >
            <Header></Header>
          </n-layout-header>
          <n-layout-content
            ref="contentRef"
            content-style="padding: 2px;"
            :native-scrollbar="false"
            
          >
          <div class="conent">
            <router-view></router-view>
        </div>
          </n-layout-content>

          <n-layout-footer>
            <Footer></Footer>
          </n-layout-footer>
        </n-layout>
      </n-layout>
    </n-space>
  </div>
</template>

<script lang="ts" setup>
import SideBar from "./SideBar.vue";
import Footer from "./Footer.vue";
import Header from "./Header.vue";
</script>
<style scoped lang="scss">
.cont {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;

  .layout {
    width: 100%;
  }
}
.conent{
    margin-top: 10vh;
    margin-bottom: 6vh;
}
</style>
